<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <div id="app"></div>
</head>

<body>
    <script type="module">
        import { ref, watch } from "/node_modules/vue/dist/vue.esm-browser.js"
        const value = ref('');
        function getData(timer) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(timer);
                }, timer);
            });
        }
        let queue = [];
        let timer = 3000;
        watch(value, async (newVal, oldVal, onCleanup) => {
            console.log("同步执行");
            // 第二次执行时，queue中已经有值了，所以会先执行队列中的函数「会将第一次的flag设置为false」
            let flag = true;

            // for (let i = 0; i < queue.length; i++) {
            //     queue[i]();
            // }

            // queue.push(() => flag = false)
            onCleanup(() => flag = false)
            timer -= 1000;
            const res = await getData(timer);
            console.log(res, "res");
            // 第一次请求回来之后，发现flag已经为false了，所以不会执行app.innerHTML = res; 只是执行了最后的请求
            if (flag) {
                app.innerHTML = res;
            }
        }, {
            flush: 'sync' // 同步执行
        });

        // 第一次请求是2s后，2000 第二次请求是1s后 1000 「理想应该是1000」 现在是2000
        setTimeout(() => {
            value.value = '123';
            value.value = '456';
        }, 1000);

    </script>
</body>

</html>